<template>
  <div class="lee-local" :style="rootStyle">
    <h1 ref="h1" class="animated">技能掌握</h1>
    <div class="lee-local-container">
      <div ref="sub" class="sub animated">
        <p>{{ $store.getters.lang[10] }}</p>
        <p>{{ $store.getters.lang[11] }}</p>
        <p>{{ $store.getters.lang[12] }}</p>
        <p>{{ $store.getters.lang[13] }}</p>
        <p>{{ $store.getters.lang[14] }}</p>
      </div>
      <div ref="div" class="animated" style="width: 500px;">
        <canvas ref="canvas"></canvas>
      </div>
    </div>
  </div>
</template>

<script>
import Chart from 'chart.js';
import 'animate.css';

export default {
  name: 'LeeSectionThree',
  computed: {
    rootStyle() {
      return {
        backgroundImage: `url(${this.$store.state.asset.images.BgImg2})`,
      };
    },
  },
  methods: {
    onShow({ elm }) {
      const h1 = this.$refs.h1;
      const div = this.$refs.div;
      const sub = this.$refs.sub;

      if (elm !== this.$el) {
        h1.classList.add('fadeOutUpBig');
        sub.classList.add('fadeOutLeft');
        div.classList.add('fadeOutRight');
        
        h1.classList.remove('fadeInDownBig');
        sub.classList.remove('fadeInLeft');
        div.classList.remove('fadeInRight');
      } else {
        h1.classList.add('fadeInDownBig');
        sub.classList.add('fadeInLeft');
        div.classList.add('fadeInRight');
        
        h1.classList.remove('fadeOutUpBig');
        sub.classList.remove('fadeOutLeft');
        div.classList.remove('fadeOutRight');
      }
    },
  },
  async mounted() {
    new Chart(this.$refs.canvas, {
      type: 'pie',
      data: {
        datasets: [{
          data: this.$store.state.skills.data,
          backgroundColor: this.$store.state.skills.color,
          hoverBackgroundColor: this.$store.state.skills.color2,
          borderWidth: 1,
        }],
        labels: this.$store.state.skills.label,
      },
      options: {
        legend: {
          display: true,
          position: 'left',
          labels: {
            fontColor: '#fff',
            fontFamily: 'lishu',
          },
        },
      },
    });
    this.$evts.on('fullpage#scroll', this.onShow);
  },
};
</script>

<style lang="less" scoped>
.lee-local {
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  flex-direction: column;
  overflow: hidden;
  filter: brightness(.6);

  h1 {
    margin: 0 0 80px;
    font-size: 40/16em;
    color: #337ab7;
    text-shadow: #fff 0 0 2px,#fff 0 0 5px,#fff 0 0 10px,
    #fff 0 0 10px,#fff 0 0 20px,#fff 0 0 20px,black 0 0 1px;
    letter-spacing: 2/16em;
  }

  &-container {
    display: flex;

    .sub {
      flex: 1;
      height: 100%;
      display: flex;
      flex-direction: column;
      padding: 0 15px;
      box-sizing: border-box;
      color: #fff;
      width: 500px;
      text-align: justify;
      justify-content: center;
      margin-right: 30px;

      p {
        margin: 0 0 20px;
      }
    }
  }
}
</style>
